<!--s市场- 期权- 合约列表-->
<!--交易列表-->
<template>
  <div class="currency-list">
    <van-list>
      <van-cell>
        <div class="flex items-center w-full text-grey font-26">
          <div class="left flex items-center">
            <div class="flex  items-center" @click="show = true">
              <span>{{ $t('全部行权价') }}  </span>
              <div class="filter-box ml-10 mr-20" >
                  <van-icon name="arrow-down" />
              </div>
            </div>
          </div>
          <div class="left flex items-center">
            <div class="flex  items-center" @click="showType = true">
              <span>{{ $t('全部类型') }}  </span>
              <div class="filter-box ml-10 mr-20" >
                <van-icon name="arrow-down" />
              </div>
            </div>
          </div>
          <div class="mid text-right flex justify-end items-center">
            {{ $t('标记价格') }}
            <div class="filter-box ml-10" >
              <div class="w-14 h-12" :class="[sortVal == 3 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(3)">
              </div>
              <div class="w-14 h-12" :class="[sortVal == 4 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(4)">
              </div>
            </div>
          </div>
          <div class="right text-right flex justify-end items-center">
            {{$t('今日涨跌') }}
            <div class="filter-box ml-10" v-if="active == 0">
              <div class="w-14 h-12 " :class="[sortVal == 5 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(5)">
              </div>
              <div class="w-14 h-12" :class="[sortVal == 6 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(6)">
              </div>
            </div>
            <!--                  <img src="./icon-sort.png" alt="icon" class="w-13 h-22 ml-5"/>-->
          </div>
        </div>
      </van-cell>
      <!--    <transition-group :name="type" tag="div">-->
      <div >
        <van-cell v-for="item in list" :key="item.id" >
          <ul class="flex justify-between w-full items-center py-20">
            <li class="flex  left">
              <p class="flex flex-col">
                  <span class="flex font-32 flex h-30 items-center ">
                    <span class="textColor font-30">{{$t(item.price)}}</span>

                  </span>
              </p>
            </li>
            <li class="flex  left">
              <p class="flex flex-col">
                  <span class="flex font-32 flex h-30 items-center ">
                    <span class="textColor font-30">{{item.type == 'up' ? $t('看涨'): $t('看跌')}}</span>

                  </span>
              </p>
            </li>
            <li class="flex flex-col items-end mid">
              <p class="textColor font-32 h-30"> {{item.tagPrice}}</p>
            </li>
            <li class="right flex items-center justify-center">
              <p class="w-153 font-31 h-67 bg-green text-white border-0  flex items-center justify-center rounded-xl text-center btn" v-if="item.change_ratio > 0">
                +{{ item.change_ratio }}%</p>
              <p class="w-153 font-31 h-67 bg-red text-white border-0  flex items-center justify-center rounded-lg text-center btn" v-else>
                {{ item.change_ratio }}%</p>
            </li>
          </ul>
        </van-cell>
      </div>
    </van-list>
    <van-action-sheet v-model="show" title="行权价" :round="false" get-container="#app" @click-close-icon="show=false">
      <van-divider />
      <div class="content pb-32 pt-5">
        <div  v-for="item in priceList" :key="item.id">
          <div class="flex items-center justify-between px-20 h-70" @click="show = false">
            <van-cell  clickable  center @click="pricePopFilter(item)" size="small" :border="false" >
              <template #default>
                <div class="flex flex-col">
                  <span class=" font-26" style="color: #fff;">{{ $t(item.title) }}</span>
                </div>
              </template>
              <template #right-icon>
                <van-checkbox v-model="item.checked" v-if="item.checked"></van-checkbox>
              </template>
            </van-cell>
          </div>
        </div>
      </div>
    </van-action-sheet>
    <van-action-sheet v-model="showType" title="期权类型" :round="false" get-container="#app" @click-close-icon="show=false">
      <van-divider />
      <div class="content pb-32 pt-5">
        <div  v-for="item in optionTypeList" :key="item.id">
          <div class="flex items-center justify-between px-20 h-70" @click="show = false">
            <van-cell  clickable  center @click="optionTypePopFilter(item)" size="small" :border="false" >
              <template #default>
                <div class="flex flex-col">
                  <span class=" font-26" style="color: #fff;">{{ $t(item.title) }}</span>
                </div>
              </template>
              <template #right-icon>
                <van-checkbox v-model="item.checked" v-if="item.checked"></van-checkbox>
              </template>
            </van-cell>
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
export default {
  name: "currency-list",
  data() {
    return {

      sortVal: 0,
      active: 0,
      type: 'right',
      timeout: null,
      inputTimeout: null,
      keywords: '',
      show:false,
      showType: false,
      priceList: [
        {title: '全部行权价', id: '1', checked: true,},
        { title: '86,000', id: '2', checked: false,},
        { title: '86,000', id: '3', checked: false,},
        { title: '86,000', id: '4', checked: false,},
        { title: '86,000', id: '5', checked: false,},
      ],
      optionTypeList: [
        {title: '全部类型', id: '1', type: 'all', checked: true,},
        { title: '看涨', id: '2', type: 'up',checked: false,},
        { title: '看跌', id: '3', type: 'down',checked: false,},
      ]
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    listSort(val) {
      this.sortVal = val
    },
    pricePopFilter(item) {
      this.show = false;
      this.priceList.forEach((item) => item.checked = false)
      item.checked = true
    },
    optionTypePopFilter(item) {
      this.showType = false
      this.optionTypeList.forEach((item) => item.checked = false)
      item.checked = true
    }
  }
}
</script>

<style scoped lang="scss">
.left {
  width: 13.875rem;
}

.mid {
  width: 185px;
  p{
    height: 2.5rem;
  }
}

.right {
  width: 182px;
  margin-left: 38px;
}
.filter-box {
  .icon_top1 {
    background: url('@/assets/image/icon_top1.png') no-repeat center;
    background-size: 100% 100%;
  }

  .icon_top2 {
    background: url('@/assets/image/icon_top2.png') no-repeat center;
    background-size: 100% 100%;
    //margin-top: 5px;
  }

  .icon_top1_active {
    background: url('@/assets/image/icon_top3.png') no-repeat center;
    background-size: 100% 100%;
  }

  .icon_top2_active {
    background: url('@/assets/image/icon_top4.png') no-repeat center;
    background-size: 100% 100%;
  }
}
::v-deep .van-action-sheet__header{
  text-align: left;
  padding-left: 20px;
  color: #fff;
}
::v-deep .van-divider {
  margin: 0;
  line-height: 1px;
}

::v-deep .van-popup {
  background: #20211d;
}
::v-deep .van-cell {
  background: none;
}
</style>
